<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="head.jsp"/>

<!--中间内容-->
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li><a href="${pageContext.request.contextPath}/user/to_login.do">登录</a></li>
                <li class="layui-this">注册</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form:form action="${pageContext.request.contextPath}/user/register.do" method="post">
                            <%--      <form:form action="#" method="post">--%>
                            <div class="layui-form-item">
                                <label for="L_uname" class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_uname" name="userName" required lay-verify="required|checkUser_name" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><span style="color: #c00;">${regmsg}</span>将会成为您唯一的登入名(6~16位字符，不能全为数字，不能以下划线开头)</div>
                            </div>
                            <input type="hidden" value="${pageContext.request.contextPath}" name="uImage">
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="uNickName" required lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!--密码-->
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_pass" name="uPassword" required lay-verify="required|checkUser_pwd" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16位，且不能出现空格</div>
                            </div>
                            <!--选择身份-->
                            <div class="layui-form-item">
                                <div class="layui-col-md3">
                                    <label class="layui-form-label">选择身份</label>
                                    <div class="layui-input-block">
                                        <select lay-verify="required" name="uType" >
                                            <option value="">请选择身份</option>
                                            <option value="学生">学生</option>
                                            <option value="老师">老师</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!--邮箱-->
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="uEmail" lay-verify="email|checkemail" id="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                    <input type="hidden" id="flag" value="1">
                                    <input type="hidden" name="checkemail"  id="checkemail">
                                </div>
                                <div class="layui-form-mid layui-word-aux">若未收到验证码，请前往垃圾箱查看</div>
                            </div>
                            <!--验证码-->
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱验证码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="emailcode" name="emailcode" lay-verify="required|checkEmail_code" placeholder="请输入邮箱验证码" autocomplete="off" class="layui-input">
                                    <input type="hidden"  name="hiddencode" id="hiddencode" value="">
                                </div>
                                <input id="send-email-code" class="layui-btn layui-btn-normal" name="send-email-code" type="button"   value="获取验证码"  />

                            </div>
                            <div class="layui-form-item">

                            </div>
                            <div class="layui-form-item">
                                <button type="submit" class="layui-btn layui-btn-lg layui-btn-radius" lay-filter="*" lay-submit>立即注册</button>
                            </div>

                        </form:form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<jsp:include page="bottom.jsp"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/emailcodeVerify.js" ></script>
<script>
    layui.use(['form','jquery'],function(){
        var form = layui.form,
            $ = layui.$;
    });
    //邮箱是否被注册过
    layui.use(['form','layer'],function(){
        var form = layui.form;

        $("#email").blur(function(){
            var msg ="";
            var email = $("#email").val();
            $.ajax({
                type: "POST",
                url: '/txblog/user/checkUserEmail.do',
                async: false, // 使用同步的方法
                data: {
                    'email':email
                },
                dataType: 'json',
                success: function(result) {
                    if (result==0) {
                        msg = "邮箱已被注册过，不可重复注册！";
                    }
                }
            });
            if(msg!=""){
                //设置隐藏域的值
                $("#checkemail").val("no");
                layer.msg(msg, {icon:5});
            }else{
                //设置隐藏域的值
                $("#checkemail").val("yes");
            }

        });
    });
</script>
<script>
    layui.use([ 'form' ], function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
        /* 自定义表单验证 */
        form.verify({
            checkUser_name : function(value, item) { // value：表单的值、item：表单的DOM对象

                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
                if (value.length < 6 || value.length > 16) {
                    return '用户名必须6到16位';
                }
                var msg;
                $.ajax({
                    type: "POST",
                    url: '/txblog/user/checkUserName.do',
                    async: false, // 使用同步的方法
                    data: {
                        'username':value
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result==0) {
                            msg = "用户名已存在";
                        }
                    }
                });
                return msg;

            },
            //验证码校验
            checkEmail_code : function(value, item) { // value：表单的值、item：表单的DOM对象
                //  验证码判断判断验证码是否填写正确
                //发送ajax请求
                var emailcode = value;
                var hiddencode = $("#hiddencode").val();
                console.log("emailcode="+emailcode+"hiddencode="+hiddencode)
                var flag="1";
                $.ajax({
                    type:"get",
                    url:"/txblog/user/checkCode.do",
                    async:false,
                    data:{"emailcode":emailcode,"hiddencode":hiddencode},
                    success:function(obj){
                        flag = obj;
                        // alert(obj);
                    },
                    dataType:"text"
                });
                if (flag=='0') {
                    return '验证码错误';
                }
            },
            checkemail : function(value, item) {
                var hiddenEmail = $("#checkemail").val();
                if(hiddenEmail=="no"){
                    return "邮箱已被注册！";
                }
            },
            checkUser_pwd : [ /^[\S]{6,16}$/, '密码必须6到16位，且不能出现空格' ]

        });
    });

</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>